import { createRouter, createWebHashHistory } from 'vue-router'
// 导入组件
// 在routes数组中配置 {path：'path',component:页面组件}
// 公共布局，所有页面的骨架
// import Layout from '@/views/Layout/index.vue'
// 路由按需加载原理，默认加载的是一个函数，访问某个路由时执行component函数，动态加载
const Layout = () => import('@/views/Layout/index.vue')
// 导入骨架下的页面
// import Home from '@/views/Home/index.vue'
const Home = () => import('@/views/Home/index.vue')

const Category = () => import('@/views/Category/index.vue')
const CategorySub = () => import('@/views/Category/sub.vue')
const Goods = () => import('@/views/Goods/index.vue')
const Login = () => import('@/views/Login/index.vue')
const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      // 首页
      {
        path: '/',
        component: Home
      },
      // 一级分类页面
      {
        path: '/category/:id',
        component: Category
      },
      // 二级分类页面
      {
        path: '/category/sub/:id',
        component: CategorySub
      },
      // 商品详情
      {
        path: '/goods/:id',
        component: Goods
      }
    ]
  },
  {
    path: '/login',
    component: Login
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
  // 路由切换会停留在上个页面的滚动位置
  // 创建路由实例的时候，加入scrollBehavior 方法
  // v2写法：return {x：0，y：0}
  // v3写法：return {left：0，top：0}
  scrollBehavior () {
    return { top: 0, left: 0 }
  }
})

export default router
